<template>
  <div class='sign_code' >
    <c-title text="邀请码"></c-title>
   <div class="bg" :class=" {pcStyle : this.fun.getPhoneEnv() == 3}">
    <span>邀请码：{{inviteCode}}</span>
    <canvas id="qrccode-canvas"></canvas>
     <p>长按保存二维码</p>
   </div>

  </div>
</template>

<script>
import QRCode from "qrcode";
var canvas = "";
export default {
  data() {
    return {
      inviteCode:""
    };
  },
  activated(){
    this.getData();
  },
  mounted() {
    // this.init()
    this.$nextTick(function() {
      // DOM操作
      canvas = document.getElementById("qrccode-canvas");
      //   this.createQrc();
      this.createQrc();
    });
  },
  methods: {
    async getData(){
      let {result,msg,data:{member}}=   await $http.get("member.member.member-data", { v: 2, basic_info: 1 })
      if(result==0){
        return this.$toast(msg)
      }
      this.inviteCode = member.inviteCode.code;
    },
    createQrc() {
       let _url = this.fun.getSiteRoot() + "/addons/yun_shop/?menu#/inviter" + "?i=" + this.fun.getKeyByI()+"&LK=1" + "&type=" + this.fun.getTyep() + "&mid=" + this.fun.getKeyByMid();
      // let _url = document.location.href;
      // _url =  _url.replace(/sign_in_subscribe_invite/,'inviter');
      console.log(_url)
      QRCode.toCanvas(canvas, _url, error => {
        if (error) {
          console.log(error);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.pcStyle {
  width: 375px !important;
}

.sign_code {
  padding: 0.625rem;

  #qrccode-canvas {
    width: 10.2rem !important;
    height: 10.2rem !important;
  }

  .bg {
    position: fixed;
    top: 3.375rem;
    z-index: -1;
    width: 94%;
    left: 3%;
    height: 13rem;
    padding-top: 1.4375rem;
    background: #fff;

    span {
      position: absolute;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      font-weight: bolder;
    }

    p {
      position: absolute;
      bottom: 10px;
      left: 47%;
      transform: translateX(-50%);
      color: #8e8e8e;
    }
  }
}

</style>
